<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更新图书</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/art-template/4.13.2/lib/template-web.js"></script>
</head>

<body>
    <h2>更新图书</h2>
    <form></form>
    <button id="btn">提交</button>
    <script id="update" type="text/html">
        <input type="hidden" name="_id" value="<%=book._id%>" id="_id"><br />
        <input type="text" name="name" value="<%=book.name%>" id="name"><br />
        <input type="text" name="author" value="<%=book.author%>" id="author"><br />
        <input type="number" name="price" value="<%=book.price%>" id="price"><br />
    </script>
    <script>
        // 读取query参数指定参数名的值
        function getQueryValue(name) {
            var str = location.href.split('?');
            var query = str[1];
            var vars = query.split('&');
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == name) {
                    return pair[1];
                }
            }
            return (false);
        }
        // render函数
        const render = async () => {
            const {
                data: res
            } = await axios(`http://localhost:8080/book/${getQueryValue('id')}`)
            const {
                data: book
            } = res
            const html = template('update', {
                book
            })
            document.querySelector('form').innerHTML = html
        }

        // 点击提交按钮发起请求跳转页面
        document.querySelector('#btn').onclick = async () => {
            // 收集数据
            const _id = document.getElementById('_id').value
            const name = document.getElementById('name').value
            const author = document.getElementById('author').value
            const price = document.getElementById('price').value

            // 发起请求
            const {
                data: res
            } = await axios.put('http://localhost:8080/book', {
                _id,
                name,
                author,
                price
            })
            if (res.code !== 200) return alert(res.message)
            alert(res.message)
            window.location = './list.html'
        }

        // 界面一显示就执行函数
        render()
    </script>
</body>

</html>